import React, { useEffect } from "react";
// PDF 解析编辑工具库
import { PDFDocument } from 'pdf-lib'
// import { Document, Page, Text, Highlight } from "react-pdf";
// react-pdf 官网Demo
import ReactPDF, {
  PDFViewer,
  Page,
  View,
  Text,
  Document,
  Font,
  StyleSheet, // 样式
} from "@react-pdf/renderer";

const highlights = [
  {
    position: {
      pageNumber: 1,
      boundingRect: { top: 50, left: 100, width: 200, height: 20 },
    },
    content: "highlighted text",
  },
];

// PDF 创建 styles
const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

export default function Index() {
  useEffect(() => {
    const bodyDom = document.getElementsByTagName("body")[0];
    const frameDom = bodyDom.getElementsByTagName("iframe");
    frameDom[1].style.display = "none";
    //
    // Array.from({length: frameDom.length}, (_, i) => {
    //   if ( frameDom[i].getAttribute('style')) {
    //     frameDom[i].style.display = 'none'
    //   }
    // })
  }, []);

  return (
    <div>
      <span>PDF 编辑下载工具 react-pdf, pdfjs, react-pdf-highlighter</span>
      <hr />
      {/* react-pdf 高亮显示文本 */}
      {/* <Document file="example.pdf">
        <Page pageNumber={1} size="A4" style={styles.page}>
          <Text>Hello World!</Text>
        </Page>
      </Document> */}

      <PDFViewer style={{ width: "1000px", height: "800px" }} showToolbar={true}>
        <Document>
          <Page size="A4" style={styles.page}>
            <View wrap={false} style={styles.section}>
              <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
              <Text>Section #2</Text>
            </View>
          </Page>
        </Document>
      </PDFViewer>
    </div>
  );
}
